<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="/ui2/src/css/layui.css">
    <link rel="stylesheet" href="/ui2/src/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="/ui2/src/layui_ext/dtree/font/iconfont.css">
    
    <script src="/ui2/src/layui.js"></script>
</head>

<body>
<div class="container">
		<div class="layui-row layui-col-space10">
			<div class="layui-fluid">
				<div class="div_h3title">
					<i class="iconfont icon-fenguangbaobiao"></i>
					<span>dtree 数据树文档 - layui.dtree</span>
				</div>
			</div>
			
			<div class="layui-fluid">
				<blockquote class="layui-elem-quote">以下介绍了在实际开发中树的基本使用方法，也是比较常见的使用。</blockquote>
				<blockquote class="layui-elem-quote">模块加载名称：dtree</blockquote>
			</div>
			
			<div class="layui-fluid">
				<fieldset class="layui-elem-field layui-field-title" id="djryjdhdsj">
					<legend>点击任意节点回调节点数据</legend>
					<div class="layui-field-box">
						<p>使用树时，你肯定需要用到这个树中所带的数据，那么只需要按照这种方式写，数据自然会出现在你的眼前。</p>
						<div class="layui-row layui-col-space10" style="margin-top: 10px;">
							<div class="layui-col-lg3"><div style="height: 350px;overflow: auto;">
							<ul id="commonTree1" class="dtree" data-id="0"></ul>
							</div></div>
							<div class="layui-col-lg8">
								<pre class="layui-code" lay-title="JavaScript">
									// 渲染，使用data渲染
									dtree.render({
									  elem: "#commonTree1",
									  data: commonTree1
									});
									
									// 点击节点触发回调
									dtree.on("node('commonTree1')" ,function(param){
									  layer.msg(JSON.stringify(param));
									});
								</pre>
							</div>
						</div>
					</div>
				</fieldset>
			</div>
</div>

</div>
</body>

<script type="text/javascript">


layui.extend({
	dtree: '/ui2/src/layui_ext/dtree/dtree'
}).use(['element','layer', 'table', 'code' ,'util', 'dtree'], function(){
	var element = layui.element,
	layer = layui.layer,
	table = layui.table,
	util = layui.util,
	dtree = layui.dtree,
	$ = layui.$;

	console.log(dtree);

    var DemoTree = dtree.render({
    	  elem: "#commonTree1",
    	  url: "/ui2/test/commonTree3.json",
    	  type: "load",
    	  initLevel: "2"
    	});
    	dtree.on("node('commonTree1')" ,function(param){
    	  layer.msg(JSON.stringify(param));
    	});
});
</script>

</html>